Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / plugins / PluginSlotNode.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<p Te6edf3v-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6fftextTa5d6ff'Ta5d6ff" Te6edf3:class=Ta5d6ff"Ta5d6fftextClassTa5d6ff"Tff7b72>

{{ node.value }}

Tff7b72</p>

Tff7b72<div Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-1.5Ta5d6ff"Tff7b72>

Tff7b72<label Te6edf3v-if=Ta5d6ff"Ta5d6ffnode.labelTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffblock text-sm font-medium text-gray-700 dark:text-gray-300Ta5d6ff"Tff7b72>

{{ node.label }}

Tff7b72</label>

Tff7b72<textarea

Te6edf3v-if=Ta5d6ff"Ta5d6ffnode.multilineTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full rounded-lg border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-3 py-2.5 text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 min-h-[6rem]Ta5d6ff"

Te6edf3:placeholder=Ta5d6ff"Ta5d6ffnode.placeholder || Ta5d6ff'Ta5d6ff'Ta5d6ff"

Te6edf3:value=Ta5d6ff"Ta5d6ffnode.value || Ta5d6ff'Ta5d6ff'Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, { id: node.id, value: Te6edf3$event.target.valueTa5d6ff })Ta5d6ff"

Tff7b72/>

Tff7b72<input

v-else

Te6edf3class=Ta5d6ff"Ta5d6ffw-full rounded-lg border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-3 py-2.5 text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500Ta5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"

Te6edf3:placeholder=Ta5d6ff"Ta5d6ffnode.placeholder || Ta5d6ff'Ta5d6ff'Ta5d6ff"

Te6edf3:value=Ta5d6ff"Ta5d6ffnode.value || Ta5d6ff'Ta5d6ff'Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, { id: node.id, value: Te6edf3$event.target.valueTa5d6ff })Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<label

Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffcheckboxTa5d6ff'Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffflex items-start gap-2.5 text-sm text-gray-700 dark:text-gray-300 cursor-pointerTa5d6ff"

Tff7b72>

Tff7b72<input

Te6edf3class=Ta5d6ff"Ta5d6ffmt-0.5 rounded border-gray-300 dark:border-zinc-600 text-blue-600 focus:ring-blue-500/40Ta5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffcheckboxTa5d6ff"

Te6edf3:checked=Ta5d6ff"Ta5d6ffBoolean(node.checked)Ta5d6ff"

@Te6edf3change=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, { id: node.id, value: Te6edf3$event.target.checkedTa5d6ff ? Ta5d6ff'Ta5d6ff1Ta5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ff0Ta5d6ff'Ta5d6ff })Ta5d6ff"

Tff7b72/>

Tff7b72<spanTff7b72>{{ node.label }}Tff7b72</span>

Tff7b72</label>

Tff7b72<button Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffbuttonTa5d6ff'Ta5d6ff" Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff" Te6edf3:class=Ta5d6ff"Ta5d6ffbuttonClassTa5d6ff" @Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, node.id)Ta5d6ff"Tff7b72>

{{ node.label }}

Tff7b72</button>

Tff7b72<span

Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffbadgeTa5d6ff'Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffinline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrapTa5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ffbadgeClassTa5d6ff"

Tff7b72>

{{ node.label }}

Tff7b72</span>

Tff7b72<div Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffactionsTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffflex flex-wrap items-center gap-2Ta5d6ff"Tff7b72>

Tff7b72<button

Te6edf3v-for=Ta5d6ff"Ta5d6ffaction in node.items || []Ta5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffaction.idTa5d6ff"

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3:class=Ta5d6ff"Ta5d6ffactionButtonClass(action)Ta5d6ff"

@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, action.id)Ta5d6ff"

Tff7b72>

{{ action.label }}

Tff7b72</button>

Tff7b72</div>

Tff7b72<div

Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffsectionTa5d6ff'Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffrounded-xl border border-gray-200 dark:border-zinc-800 bg-gray-50/70 dark:bg-zinc-900/40 p-4 sm:p-5 space-y-4Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffnode.title || node.descriptionTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-1Ta5d6ff"Tff7b72>

Tff7b72<h2 Te6edf3v-if=Ta5d6ff"Ta5d6ffnode.titleTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6fftext-base font-semibold text-gray-900 dark:text-gray-100Ta5d6ff"Tff7b72>

{{ node.title }}

Tff7b72</h2>

Tff7b72<p Te6edf3v-if=Ta5d6ff"Ta5d6ffnode.descriptionTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6fftext-sm text-gray-600 dark:text-gray-400Ta5d6ff"Tff7b72>

{{ node.description }}

Tff7b72</p>

Tff7b72</div>

Tff7b72<PluginSlotNode

Te6edf3v-for=Ta5d6ff"Ta5d6ff(child, index) in node.children || []Ta5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff"

Te6edf3:node=Ta5d6ff"Ta5d6ffchildTa5d6ff"

@Te6edf3action=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6fflistTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6ff(node.items || []).length && node.variant === Ta5d6ff'Ta5d6ffcardsTa5d6ff'Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffrounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden divide-y divide-gray-200 dark:divide-zinc-800 bg-white dark:bg-zinc-950Ta5d6ff"

Tff7b72>

Tff7b72<PluginSlotNode

Te6edf3v-for=Ta5d6ff"Ta5d6ff(item, index) in node.items || []Ta5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff"

Te6edf3:node=Ta5d6ff"Ta5d6ffitemTa5d6ff"

@Te6edf3action=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<template v-elseTff7b72>

Tff7b72<PluginSlotNode

Te6edf3v-for=Ta5d6ff"Ta5d6ff(item, index) in node.items || []Ta5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff"

Te6edf3:node=Ta5d6ff"Ta5d6ffitemTa5d6ff"

@Te6edf3action=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</template>

Tff7b72<p

Te6edf3v-if=Ta5d6ff"Ta5d6ff!(node.items || []).lengthTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffrounded-lg border border-dashed border-gray-300 dark:border-zinc-700 px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400Ta5d6ff"

Tff7b72>

{{ node.emptyText || "" }}

Tff7b72</p>

Tff7b72</div>

Tff7b72<div Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffrowTa5d6ff'Ta5d6ff" Te6edf3:class=Ta5d6ff"Ta5d6ffrowClassTa5d6ff"Tff7b72>

Tff7b72<PluginSlotNode

Te6edf3v-for=Ta5d6ff"Ta5d6ff(child, index) in node.children || []Ta5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff"

Te6edf3:node=Ta5d6ff"Ta5d6ffchildTa5d6ff"

@Te6edf3action=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3v-else-if=Ta5d6ff"Ta5d6ffnode.type === Ta5d6ff'Ta5d6ffcolumnTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-4Ta5d6ff"Tff7b72>

Tff7b72<PluginSlotNode

Te6edf3v-for=Ta5d6ff"Ta5d6ff(child, index) in node.children || []Ta5d6ff"

Te6edf3:key=Ta5d6ff"Ta5d6ffindexTa5d6ff"

Te6edf3:node=Ta5d6ff"Ta5d6ffchildTa5d6ff"

@Te6edf3action=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffactionTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffinputTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"

Tff7b72/>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

export default {

name: "PluginSlotNode",

props: {

node: {

type: Object,

required: true,

},

},

emits: ["action", "input"],

computed: {

textClass() {

const variant = this.node.variant || "body";

const map = {

title: "text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100",

subtitle: "text-base font-semibold text-gray-900 dark:text-gray-100",

body: "text-sm leading-relaxed text-gray-700 dark:text-gray-300",

caption: "text-xs text-gray-500 dark:text-gray-400",

mono: "font-mono text-xs text-gray-800 dark:text-gray-200 break-all",

stat: "text-sm font-medium text-gray-800 dark:text-gray-200",

};

return map[variant] || map.body;

},

buttonClass() {

return this.actionButtonClass(this.node);

},

rowClass() {

const variant = this.node.variant || "default";

if (variant === "path") {

return "grid grid-cols-1 sm:grid-cols-[minmax(0,1.15fr)_auto_minmax(0,1.35fr)_auto] gap-x-4 gap-y-2 items-center px-4 py-3 text-sm";

}

if (variant === "announce") {

return "grid grid-cols-1 sm:grid-cols-[auto_minmax(0,0.75fr)_minmax(0,1fr)_minmax(0,1.1fr)] gap-x-4 gap-y-2 items-center px-4 py-3 text-sm";

}

if (variant === "card") {

return "grid grid-cols-1 sm:grid-cols-[minmax(0,1.15fr)_auto_minmax(0,1.35fr)_auto] gap-x-4 gap-y-2 items-center px-4 py-3 text-sm bg-white dark:bg-zinc-950";

}

if (variant === "announce-card") {

return "grid grid-cols-1 sm:grid-cols-[auto_minmax(0,0.75fr)_minmax(0,1fr)_minmax(0,1.1fr)] gap-x-4 gap-y-2 items-center px-4 py-3 text-sm bg-white dark:bg-zinc-950";

}

return "flex flex-wrap items-center gap-3 text-sm";

},

badgeClass() {

const variant = this.node.variant || "muted";

const map = {

success: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200",

danger: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200",

muted: "bg-gray-100 text-gray-700 dark:bg-zinc-800 dark:text-zinc-300",

};

return map[variant] || map.muted;

},

},

methods: {

actionButtonClass(action) {

const base =

"inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/40 w-fit";

if (action.variant === "secondary") {

return `${base} border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800`;

}

if (action.variant === "danger") {

return `${base} border border-red-300 dark:border-red-800 bg-white dark:bg-zinc-900 text-red-600 dark:text-red-300 hover:bg-red-50 dark:hover:bg-red-950/30`;

}

return `${base} bg-blue-600 text-white hover:bg-blue-700`;

},

},

};

Tff7b72</script>